<template>
  <div>
    <!--  <input-->
    <!--         :username="username"-->
    <!--         @input="$emit('input', $event.target.input)"-->
    <!--  >-->
<!-- this.$listeners  -->
    <input
      type="text"
      v-bind:value="value"
      v-on="inputListeners">


<!--v-model-->
    <input
      type="text"
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)">
    <br>
<!--    <button @click="$listeners.testM1()">click</button>-->

    <button @click="$emit('update:username', 'test')">click</button>
    <button @click="commitEmit">test emit</button>
  </div>
</template>

<script>
  export default {
    name: "BaseInput",
    // model:{
    //   prop: 'username',
    //   event: 'input'
    // },
    // props: ['username'],
    // inheritAttrs: false,
    model: {
      prop: 'value',
      event: 'input'
    },
    props: {
      value: String
    },
    computed: {
      inputListeners: function () {
        var vm = this
        // `Object.assign` 将所有的对象合并为一个新对象
        return Object.assign({},
          // 我们从父级添加所有的监听器
          this.$listeners,
          // 然后我们添加自定义监听器，
          // 或覆写一些监听器的行为
          {
            // 这里确保组件配合 `v-model` 的工作
            input: function (event) {
              vm.$emit('input', event.target.value)
            }
          }
        )
      }
    },
    methods:{
      commitEmit(){
        let student={"age":10,"name":"gang"}
        this.$emit('test-emit',student)
      }
    }
  }
</script>

<style scoped>

</style>
